<template>
    <div class="hjPlayer-container">
        <video
            :id="id"
            :class="className"
            :width="width"
            :height="height"
            :muted="false"
            controls
            disablePictureInPicture 
            controlslist="nodownload"
            oncontextmenu="return false;"
        ></video>
    </div>
</template>
<script>
import HJPlayer from 'hjplayer'
export default {
    props: {
        playerOption: {
            type: Object,
            default() {
                return {};
            }
        },
        id: {
            type: String,
            default: "playerId"
        },
        className: {
            type: String,
            default: "playerClass"
        },
        width: {
            type: String,
            default: "100%"
        },
        height: {
            type: String,
            default: "100%"
        },
        params: {
            /**
             * Logger 相关的设置
             */
            // 强制使用全局标签 HJPLAYER
            FORCE_GLOBAL_TAG: false,
            // Logger的全局标签
            GLOBAL_TAG: "HJPLAYER",
            // 是否触发logger的绑定事件
            ENABLE_CALLBACK: false,
            // 是否打开 ERROR 提示
            ENABLE_ERROR: true,
            // 是否打开 INFO 提示
            ENABLE_INFO: false,
            // 是否打开 WARN 提示
            ENABLE_WARN: false,
            // 是否打开 DEBUG 提示
            ENABLE_DEBUG: false,
            /**
             * seek 相关的参数设置
             */
            enableWorker: false,

            enableStashBuffer: true,

            stashInitialSize: 384,

            isLive: true,

            lazyLoad: true,

            lazyLoadMaxDuration: 3 * 60,

            lazyLoadRecoverDuration: 30,

            deferLoadAfterSourceOpen: true,

            // autoCleanupSourceBuffer: default as false, leave unspecified
            autoCleanupMaxBackwardDuration: 3 * 60,

            autoCleanupMinBackwardDuration: 2 * 60,

            statisticsInfoReportInterval: 1000,

            fixAudioTimestampGap: true,

            accurateSeek: false,

            seekType: "range", // [range, param, custom]

            seekParamStart: "bstart",

            seekParamEnd: "bend",

            rangeLoadZeroStart: false,

            CustomSeekHandler: undefined,

            reuseRedirectedURL: false,
            // referrerPolicy: leave as unspecified

            headers: undefined,

            customLoader: undefined,

            tsAutoLevelChoose: false, // 自动选择ts码率, 在master.m3u8时适用

            maxFragLookUpTolerance: 0.25, // used by stream-controller

            defaultAudioCodec: undefined
        }
    },
    data() {
        return {
            player: null
        };
    },
    mounted() {
        this.initPlayer();
    },
    watch: {
        playerOption: {
            handler(newVal, oldVal){
                this.player && this.player.destroy();
                this.playerOption.segments && (this.playerOption.segments = undefined)
                this.initPlayer();
            },
            deep:true,
        },
    },
    beforeDestroy() {
        if (!this.player) {
			return;
		}
		this.player.pause();
		this.player.unload();
        this.player.detachMediaElement();
        this.playerOption.segments && (this.playerOption.segments = undefined)
        this.player.destroy();
        this.player=null;
    },
    methods: {
        initPlayer() {
            if(this.player) { this.player.destroy(); }
            if (HJPlayer.isSupported()) {
                this.player = new HJPlayer(this.playerOption, this.params);
                var videoElement = document.getElementById(this.id);
                this.player.attachMediaElement(videoElement);
                this.player.load();
                this.player.play();
                // var playPromise = this.player.load();

                // if (playPromise !== undefined) {
                //     playPromise
                //         .then(_ => {
                //             this.player.play();
                //         })
                //         .catch(error => {
                //         });
                // }
            }
        }
    }
};
</script>
<style lang="scss">
.hjPlayer-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    //    进度条
    video::-webkit-media-controls-timeline {
         display: none;
    }
    video::-ms-media-controls-timeline {
         display: none;
    }
        video::-o-media-controls-timeline {
         display: none;
    }
        video::-moz-media-controls-timeline {
         display: none;
    }
    //去掉边框蓝色线
    video{
        outline:none;
        object-fit: fill;
    }
}
</style>
